<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"  lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/layui-v2.6.13/layui/layui.js}"></script>
  <link rel="stylesheet" type="text/css" th:href="@{/static/layui-v2.6.13/layui/css/layui.css}"/>
  <title>Title</title>
</head>
<body>
<div class="layui-card">
  <div class="layui-card-header" align="center">订单列表</div>
  <div class="layui-card-body">
    <div align="right">
      <label class="layui-btn layui-btn-primary">全选<input type="checkbox" onclick="checkAll(this)"></label>
      <button type="button" onclick="pay()" class="layui-btn layui-btn-primary">付款</button>
      <button type="button" onclick="del()" class="layui-btn layui-btn-primary">取消订单</button>
      <button type="button" onclick="receive()" class="layui-btn layui-btn-primary">确认收货</button>
    </div>
    <table class="layui-table">
      <tr>
        <th><input type="checkbox" onclick="checkAll(this)"></th>
        <th>订单号</th>
        <th>用户id</th>
        <th>交易金额</th>
        <th>交易时间</th>
        <th>订单状态</th>
        <th>订单详情</th>
      </tr>
      <tr th:each="dd:${list}">
        <td><input type="checkbox" th:value="${dd.orderId}" name="xun"></td>
        <td th:text="${dd.orderId}" > </td>
        <td th:text="${dd.userId}" > </td>
        <td th:text="${dd.orderMoney}" > </td>
        <td th:text="${dd.createTime}" > </td>
        <td th:switch="${dd.orderStatus}">
          <span th:case="1">待付款</span>
          <span th:case="2">待发货</span>
          <span th:case="3">已发货</span>
          <span th:case="4">已签收</span>
          <span th:case="5">退款中</span>
        </td>
        <td><button type="button" th:onclick="detail([[${dd.orderId}]])" class="layui-btn layui-btn-sm">查看</button></td>
      </tr>
    </table >
  </div>
</div>

</body>
<script>
  function detail(id){
    location.href='detail?orderId='+id;
  }
  function checkAll(obj){
    if(obj.checked==true){
      var all = document.getElementsByName("xun");
      for(var i = 0; i < all.length; i++){
        all[i].checked=true;
      }
    }
    else{
      var all = document.getElementsByName("xun");
      for(var i = 0; i < all.length; i++){
        all[i].checked=false;
      }
    }
  }
  function pay(){
    var ids = "";
    var all = document.getElementsByName("xun");
      for(var i = 0; i < all.length; i++){
        if(all[i].checked==true){
          ids += all[i].value + ",";
        }
      }
    $.ajax({
      url:'pay',
      type:'post',
      data:'ids='+ids.substr(0,ids.length-1),
      success:function(obj){
        alert(obj);
        location.reload();
      }
    });
  }
  function del(){
    var ids = "";
    var all = document.getElementsByName("xun");
      for(var i = 0; i < all.length; i++){
        if(all[i].checked==true){
          ids += all[i].value + ",";
        }
      }
    $.ajax({
      url:'delete',
      type:'post',
      data:'ids='+ids.substr(0,ids.length-1),
      success:function(obj){
        location.reload();
      }
    });
  }
  function receive(){
    var ids = "";
    var all = document.getElementsByName("xun");
      for(var i = 0; i < all.length; i++){
        if(all[i].checked==true){
          ids += all[i].value + ",";
        }
      }
    $.ajax({
      url:'receive',
      type:'post',
      data:'ids='+ids.substr(0,ids.length-1),
      success:function(obj){
        location.reload();
      }
    });
  }
</script>
</html>